<template>
	<div>
		<el-tabs v-model="activeTab">
			<el-tab-pane label="基本资料" name="userinfo">
				<userInfo v-if="activeTab == 'userinfo'" :userModel="userModel" :btn="false"/>
			</el-tab-pane>
			<el-tab-pane label="附件信息" name="userEnclosure">
				<userEnclosured v-if="activeTab == 'userEnclosure'" :userModel="userModel" :btn="false"/>
			</el-tab-pane>
			<el-tab-pane label="重要经历" name="userExperience">
				<userExperience v-if="activeTab == 'userExperience'" :userModel="userModel" :btn="false"/>
			</el-tab-pane>
			<el-tab-pane label="培训记录" name="userTrainingRecord">
				<userTrainingRecord v-if="activeTab == 'userTrainingRecord'" :userModel="userModel"/>
			</el-tab-pane>
			<el-tab-pane label="考勤记录" name="userAttendanceRecord">
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import userAvatar from "@/views/system/user/profile/userAvatar";
	import userInfo from "@/views/system/user/profile/userInfo";
	import userEnclosured from "@/views/system/user/profile/userEnclosured";
	import userTrainingRecord from "./userTrainingRecord";
	import userExperience from "@/views/system/user/profile/userExperience";
	import resetPwd from "@/views/system/user/profile/resetPwd";
	import { getUser } from "@/api/system/user";
	import { treeselect } from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	export default {
		props: ['userId'],
		components: {
			Treeselect,
			userEnclosured,
			userExperience,
			userInfo,
			userTrainingRecord
		},
		data() {
			return {
				userModel: {},
				roleGroup: {},
				postGroup: {},
				activeTab: "userinfo",
				postOptions: [],
				deptOptions: [],
			};
		},
		created() {
			/** 查询部门下拉树结构 */
			treeselect().then(response => {
				this.deptOptions = response.data;
			});
			this.getUser();
		},
		methods: {
			getUser() {
				getUser(this.userId).then(response => {
					this.userModel = response.data;
					this.postOptions = response.posts;
					this.userModel.postIds = response.postIds;
					this.postGroup = response.postGroup;
				});
			}
		}
	};
</script>